<template>
  <div id="communityAdd" class="same-change-oldstyle">
    <div class="same-head-box" style="border-bottom:0px">
      <div class="saem-seat-box">
        <div class="saem-seat-left">
          <span>当前位置：</span>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/communityList' }">园区管理</el-breadcrumb-item>
            <el-breadcrumb-item>园区添加</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="saem-seat-right">
          <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
          <button class="same-search-btns" v-if="is_device" @click="returnBack">返回</button>
        </div>
      </div>
    </div>
    <div class="editwrap">
      <h4 class="four loction-title-wrapper"><i class="el-icon-map-location"></i>园区信息添加</h4>
      <div class="village-row">
        <div class="village-cell">
          <span class="title">园区名称</span>
          <el-input class='ipt' size="medium" type="text" name="community_name" v-model="village_name"
            placeholder="请输入园区名称 (如:幸福小区)" maxlength="20"></el-input>
          <span class="must-star">*</span>
        </div>

        <div class="village-cell">
          <span class="title">园区类型</span>
          <el-select class='ipt-2' size="medium" v-model="village_type" placeholder="请选择类型" @change="changeVillageType">
            <el-option v-for="item in villageType" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <span class="must-star">*</span>
        </div>

      </div>

      <div class="village-row">
        <div class="village-cell">
          <span class="title">园区地址</span>
          <div class='ipt'>
            <el-select size="medium" class="mr-10" v-model="province_id" placeholder="请选择省份" @change="chooseProvince">
              <el-option v-for="item in Province" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <el-select size="medium" class="mr-10" v-model="city_id" placeholder="请选择城市" @change="chooseCity">
              <el-option v-for="item in City" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <el-select size="medium" v-model="area_id" placeholder="请选择区县" @change="chooseArea">
              <el-option v-for="item in Area" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
          <span class="must-star">*</span>
        </div>

        <div class="village-cell">
          <span class="title">详细地址</span>
          <el-autocomplete style="width: 300px;" size="medium"  v-model="address" :fetch-suggestions="querySearchAsync"
            placeholder="请输入内容,例如北京天坛" :trigger-on-focus="false" @select="handleSelect">
            <template slot-scope="{ item }">
              <div class="custom-li">
                <div class="auto-name">{{ item.title }}</div>
                <span class="auto-addr">{{ item.address }}</span>
              </div>
            </template>
            <el-button @click="showMapDialog" size="medium" slot="append" icon="el-icon-map-location"></el-button>
          </el-autocomplete>
          <!-- <el-input size="medium" style="width: 300px;" class="flex-1" v-model="address" placeholder="请输入内容,例如北京天坛">
            <el-button @click="showMapDialog" size="medium" slot="append" icon="el-icon-map-location"></el-button>
          </el-input> -->
           <!-- <el-button @click="showMapDialog" size="medium" slot="append" icon="el-icon-map-location"></el-button> -->
          <span class="must-star">*</span>
          <i v-if="!showTips" @click="showTips=true" class="el-icon-question question"></i>
        </div>
      </div>
      <!-- 使用地图提示 默认关闭 -->
      <div v-if="showTips" class="village-row" style="margin-bottom: 20px;">
        <el-alert @close="showTips=false" title="地图如何操作？" type="info">
          <p>· 在详细地址中输入关键词，例如北京中关村，从反馈的列表中选择。</p>
          <p>· 选择完毕后，下方地图会自动定位当选择地址。</p>
          <p>· 点击详细地址后面的图标,查看地图经纬度是否正确。</p>
          <p>· 如果当前地图“蓝色标记“不准确，可用鼠标滚轮滚动来缩放地图，拖动”蓝色标记“来标记位置。</p>
          <p>· 如若觉得详细地址描述不准确，<span style="color: red;">在标记正确的地址后（前三个步骤）</span>，直接修改详细地址。</p>
        </el-alert>
      </div>
      <!-- 以下是 经营设置 -->
      <div class="village-row" >
        <el-collapse accordion v-model="activeNames" @change="handleCollapseChange">
          <el-collapse-item  name="1" >
              <template slot="title">
                <i class="header-icon el-icon-setting"></i> 经营设置 
                <span class="hint_title" v-if="hint_open">(以下信息如设置, 请完善信息)</span>
                <span class="hint_title" v-else>(可在添加园区后设置,也可以点击快捷添加)</span>
              </template>
              <div class="pd40" :class="{havPadding:paddType}">
              <!-- 如果不需要收缩直接将这块放出去 -----------经营设置 -->
              <div class="village-row pdb10">
                <div class="village-cell">
                  <span class="title">区域码</span>
                  <el-select v-model="area_code_id" placeholder="请选择区域码" @change="changeAreaCode" class='ipt' size="medium">
                      <el-option v-for="item in areaCodeList" :key="item.id" :label="item.area_code" :value="item.id" :disabled="item.is_frozen==-1">
                        <span style="float: left">{{ item.name }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.area_code }}</span>
                      </el-option>
                    </el-select>
                    <span class="must-star"></span>
                </div>
                <div class="village-cell">
                  <span class="title">备案检查</span>
                  <el-switch size="medium" 
                    v-model="check_card_record"
                    active-color="#2c5586"
                    inactive-color="#CCCCCC">
                  </el-switch>
                  <div class="edit-comit">{{check_card_record?'开':'关'}}</div> 
                  <el-date-picker v-if="check_card_record" v-model="check_record_card_time" style="width:223px" size="medium" type="date" value-format="yyyy-MM-dd" placeholder="选择开启日期">
                  </el-date-picker>
                  <span class="must-star" v-if="check_card_record">*</span>
                  <span class="hint_show">开启时，卡库存在此水卡</span>
                </div>
              </div>
              <div class="village-row pdb10">
                <div class="village-cell ">
                  <span class="title">水卡阈值金额</span>
                  <el-input class='ipt' size="medium" type="text" name="threshold_value" v-model="threshold_value"
                    placeholder="请输入水卡阈值金额" maxlength="20"></el-input>
                  <span class="must-star"></span>
                </div>
                <div class="village-cell">
                  <span class="title">水卡阈值金额开关</span>
                    <el-switch
                    v-model="threshold_on"
                    active-color="#2c5586"
                    inactive-color="#CCCCCC">
                  </el-switch>
                  <div class="edit-comit">{{threshold_on?'开':'关'}}</div> 
                  <span class="hint_show">开启时，水卡余额低于阈值时提醒用户</span>
                </div>
              </div>
              <div class="village-row pdb20">
                <div class="village-cell">
                  <span class="title">水卡低余额比例提醒</span>
                    <el-switch
                    v-model="prompt_on"
                    active-color="#2c5586"
                    inactive-color="#CCCCCC">
                  </el-switch>
                  <div class="edit-comit">{{prompt_on?'开':'关'}}</div> 
                  <el-input size="medium" v-model="prompt_value" placeholder="请输入低余额水卡比例(小于100整数)" style="width: 240px;margin-right:10px"></el-input> %
                  <span class="must-star"></span>
                  <span class="hint_show">开启时，水卡低余额（余额小于阈值金额）比例大于设定值时提醒经营者</span>
                </div>
                <div class="village-cell ">
                  <span class="title">价格模板</span>
                    <el-select placeholder="请选择价格模板" @change="changeOnlineWaterTemplate" v-model="online_template_title"  class='ipt-2' size="medium">
                      <el-option v-for="(item,index) in onlineTemplateList" :key="item.id" :label="item.overdue?item.template_title+'(已过期)':item.template_title" :disabled="item.overdue"
                        :value="index"></el-option>
                    </el-select>
                    <span class="must-star"></span>
                    <div class="temp1-list">
                      <template v-if="online_template_title!==''">
                        <div class="list-ones" v-for="(item,key,i) in onlineTemplates" :key="key">
                          <span>配置{{i+1}}</span>
                          <span>打水量：{{item.rise}}L</span>
                          <span>金额：{{item.money}}元</span>
                        </div>
                      </template>
                    </div>
                </div>
              </div>
              <div class="village-row ">
                <div class="village-cell ">
                  <span class="title">用户自助充值模板</span>
                    <el-select placeholder="请选择用户自助充值模板" @change="changeRechargeTemplate" v-model="recharge_template_title" class='ipt' size="medium">
                      <el-option v-for="(item,index) in rechargeTemplateList" :key="item.id" :label="item.overdue?item.template_title+'(已过期)':item.template_title" :value="index" :disabled="item.overdue"></el-option>
                    </el-select>
                    <div class="temp-list2">
                      <template v-if="recharge_template_title!==''">
                        <div class="list-ones" v-for="(item,key) in rechargeTemplates" :key="key">
                          <span>充值金额：{{item.recharge}}元</span>
                          <span>赠送金额：{{item.give}}元</span>
                        </div>
                      </template>
                    </div>
                    <span class="must-star"></span>
                </div>
                <div class="village-cell ">
                </div>
              </div>
              </div>
              <!-- 到这里 -->
          </el-collapse-item>
        </el-collapse>
      </div>

   

   
      <!-- <div class="mapwrap" v-loading="loading" element-loading-text="拼命加载中">

        <div id="allmap"></div>
      </div>  -->




      <el-button style="margin-top: 20px;" size="medium" type="primary" @click="bindingVillage">确 定</el-button>
      
      <div class="new-add-map-dialog" :close-on-click-modal="false" v-show="dialogTableVisible">
        <div class="map-wrapper-box">

          <el-autocomplete size="medium" class="map-input" v-model="address" :fetch-suggestions="querySearchAsync"
            placeholder="请输入内容,例如北京天坛" :trigger-on-focus="false" @select="handleSelect">
            <template slot-scope="{ item }">
              <div class="custom-li">
                <div class="auto-name">{{ item.title }}</div>
                <span class="auto-addr">{{ item.address }}</span>
              </div>
            </template>
          </el-autocomplete>
          <el-button icon="el-icon-close" class="new-close-btn" circle @click="closeMapDialog()"></el-button>

          <div id="container1"></div>
          <div class="map-alert">
            <el-alert title="选择园区后，地图为何不能正常显示？" type="info">
              <p>地图是根据选择的园区定位来展示的，如果地图不能正常显示，请刷新页面。</p>
            </el-alert>
          </div>
        </div>
      </div>
    </div>

    <!-- <script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script> -->
  </div>
</template>

<script>
  import { regionDataPlus, CodeToText } from "element-china-area-data";
  import QQMapWX from '@/lib/js/qqmap-jssdk'

  var map;
  var tencentMap = new QQMapWX();
  let qqMap, qqMarker;
  import eventBus from '@/lib/js/returnback.js';

  export default {
    name: "communityAdd",
    data: function () {
      return {
        paddType:false,
        activeNames:['1'],//经营设置是否打开
        hint_open:false,//是否打开手风琴提示
        showTips: false,//是否展示地图
        longitude: 116.397572, //经度
        latitude: 39.908518, //纬度
        village_type: "", //选择的园区类型
        villageType: [], //园区类型
        village_name: "", //园区名称
        check_record_card_time: "",

        address: "", // 详细地址
        village_id: "", // 园区ID
        userlocation: { lng: "", lat: "" }, // 设备位置，经度-纬度
        tableData: [], // 附近设备的结果集
        count: "", // 附近设备的数量
        list: [], // 附近设备的经纬度
        options: regionDataPlus,
        baidu: "重庆", // 百度地图
        // 三级联动
        Province: [],
        City: [],
        Area: [],
        province_id: "",
        city_id: "",
        area_id: "",
        province_name: "",
        city_name: "",
        area_name: "",
        addrxq: "",
        loading: false, //加载动画
        styleObject: {
          "font-style": "normal",
          "margin-left": "5px",
          color: "red"
        },
        is_device:this.$route.query.is_device==1?true:false,//是否是新增页面进来
        canDo:true,//提交按钮开关
        dialogTableVisible: false,
         areaCodeList: [],//区域码
         area_code_id:'',//当前选中的区域id
         check_card_record: false,//是否开启备案检查
         check_record_card_time: "",//开启备案检查的时间
         threshold_on: false,//水卡阈值金额开关
         threshold_value: '',//水卡阈值金额
         prompt_on: false,//水卡低余额比例提醒
         prompt_value: '',//提醒比例值
         online_template_title: "通用模板",//线上打水模板
         onlineTemplateList:[],//打水列表
         onlineTemplates:'',//当前选中的打水模板
         online_template_id:'',//当前选中的打水模板id
        recharge_template_title: "通用模板",
        rechargeTemplateList:[],//充值模板
        rechargeTemplates:'',//当前选中的充值模板
        recharge_template_id:'',//当前选中的充值模板id
      };
    },
    inject: [
      'reload'
    ],

    created() {
      // this.loadBMapScript();
      // this.loadmap();

    },

    mounted() {
      this.getProvince(); // 获取省地址
      this.getVillageType();
      this.initMap();
      this.getAreaCode();//获取区域码列表
      this.getOnlineWaterTemplate();//获取打水模板
      this.getReachargeTemplate();//充值打水模板
},
    //进入之前
		beforeRouteEnter(to, from, next) {
			next();
		},
		//离开之前 将新增的id返回到路由中 一个新增一个编辑
		beforeRouteLeave(to, from, next) {	
      if(to.path=='/deviceadd' || to.path=='/edit'){
        to.meta.village_id=this.village_id;
      }
			next();
		},
    methods: {
      //选择打水模板
      changeOnlineWaterTemplate(e) {
        this.online_template_id = this.onlineTemplateList[e].id
        this.onlineTemplates = this.onlineTemplateList[e].template;
      },
      //选择充值模板
      changeRechargeTemplate(e) {
        this.recharge_template_id = this.rechargeTemplateList[e].id;
        this.rechargeTemplates = this.rechargeTemplateList[e].template;
        this.paddType=true;
      },
      //手风琴
      handleCollapseChange(val){
        this.hint_open=val==1?true:false;
      },
      //选中的区域码id
      changeAreaCode(e) {
        this.area_code_id = e;
      },
      //获取区域码
      getAreaCode() {
        this.$post({
          url: "Partner/CardMother/cardMotherList",
          success: res => {
            if (res.code == 1000) {
              const data = res.data.data;
              this.areaCodeList = data;
              // console.log(data);
            } else {
              // this.$message.error(res.message);
            }
          }, error: e => {
            this.$message.error("获取区域码失败");
          }
        })
      },
      
      //获取线上打水模板
      getOnlineWaterTemplate() {
        this.$post({
          url: "Partner/Village/templateList",
          data: {
            template_species: 2,
            row: 100
          },
          success: data => {
            if (data.code == 1000) {
              data.data.data.forEach((v, k) => {
                if (v.template_status == 1 && v.overdue == false) {
                  this.onlineTemplateList.push(v);
                }
              });

            } else {
              this.$message.error(data.message);
            }
          }
        });
      },
            //获取用户充值模板
      getReachargeTemplate() {
        this.$post({
          url: "Partner/Village/templateList",
          data: {
            template_species: 1,
            row: 100
          },
          success: data => {
            if (data.code == 1000) {
              data.data.data.forEach((v, k) => {
                if (
                  v.template_status == 1 &&
                  // v.audit_status == 2 && //默认未审核的也可以使用
                  v.overdue == false
                ) {
                  this.rechargeTemplateList.push(v);
                }
              });
            } else {
              this.$message.error(data.message);
            }
          }
        });
      },
      closeMapDialog(){
        this.dialogTableVisible=false
      },
      showMapDialog() {
        this.dialogTableVisible = true;
        // qqMap.panTo(new qq.maps.LatLng(this.latitude, this.longitude));
        // qqMarker.setPosition(new qq.maps.LatLng(this.latitude, this.longitude))
        if (!qqMap) {
          this.initMap();
        } else {
          qqMap.panTo(new qq.maps.LatLng(this.latitude, this.longitude));
          qqMarker.setPosition(new qq.maps.LatLng(this.latitude, this.longitude))
        }

      },
      initMap() {
        this.TMap("2CZBZ-RKRK3-HGJ3G-YH2G2-GIL3T-LHBFD").then(qq => {
          let center = new qq.maps.LatLng(this.latitude, this.longitude);
          qqMap = new qq.maps.Map(document.getElementById("container1"), {
            center: center,
            zoom: 14
          });
          qqMarker = new qq.maps.Marker({
            position: center,
            draggable: true,
            map: qqMap
          });
          qq.maps.event.addListener(qqMarker, 'dragend',  ()=> {
            var currentPosition = qqMarker.getPosition();
            this.latitude = currentPosition.lat;
            this.longitude = currentPosition.lng;
            console.log(currentPosition);
          });

        });
      },


      querySearchAsync(queryString, cb) {
        tencentMap.getSuggestion({ keyword: queryString }).then(res => {
          res.forEach(item => {
            res.value = res.title
          })
          console.log(res);
          cb(res)
        });

      },

      handleSelect(item) {
        this.address = item.title;
        let location = item.location;
        this.longitude = location.lng;
        this.latitude = location.lat;
        if (!qqMap) {
          this.initMap();
        } else {
          qqMap.panTo(new qq.maps.LatLng(this.latitude, this.longitude));
          qqMarker.setPosition(new qq.maps.LatLng(this.latitude, this.longitude))
        }
      },






      //异步加载腾讯地图处理
      TMap(key) {
        return new Promise(function (resolve, reject) {
          window.init = function () {
            resolve(qq)//注意这里
          }
          var script = document.createElement("script");
          script.type = "text/javascript";
          script.src = `https://map.qq.com/api/js?v=2.exp&key=${key}&callback=init`;
          script.onerror = reject;
          document.head.appendChild(script);
        })
      },

      RefreshFun() {
        // 调用reload方法，刷新整个页面
        this.reload()
      },
      //返回
      returnBack() {
        this.$router.back(-1);
      },
      changeVillageType(e) {
        this.village_type = e;
      },

      //获取园区类型
      getVillageType() {
        this.$post({
          url: "Common/Common/getVillageType",
          success: res => {
            if (res.code === 1000) {
              let villageType = [];
              let keys = Object.keys(res.data);
              let values = Object.values(res.data);
              keys.forEach((current, index) => {
                villageType.push({
                  value: current,
                  label: values[index]
                });
              });
              this.villageType = villageType;
            } else {
              this.$message.error(res.message);
            }
          }
        });
      },
      //绑定园区
      bindingVillage() {
        //   eventBus.$emit('village_id',7);  
        //   this.village_id=8;
        //   this.$router.go(-1);
        // return false
        var that = this;
        if(!this.canDo){
          return false;
        }
        this.canDo=false;
        // Ajax请求
        that.$post({
          url: "Partner/Village/addVillage",
          data: {
            province: that.province_id,
            city: that.city_id,
            area: that.area_id,
            address: that.address,
            village_name: that.village_name,
            province_name: that.province_name,
            city_name: that.city_name,
            area_name: that.area_name,
            lat: that.latitude,
            lng: that.longitude,
            village_type: that.village_type,
            //之后是经营设置
            check_card_record: this.check_card_record==true?1:2,
            check_record_card_time: this.check_record_card_time,
            template_id: this.recharge_template_id,
            set_template_id: this.online_template_id,
            area_code_id: this.area_code_id,
            threshold_on: this.threshold_on==true?1:2,
            threshold_value: this.threshold_value,
            prompt_on: this.prompt_on==true?1:2,
            prompt_value: this.prompt_value
          },
          success: data => {
            //console.log(data);
            if (data.code == 1000) {
              that.$message.success(data.message);
              //是否是快速添加?this.is_device
              if(this.is_device){
                this.village_id=data.data.village_id;
                this.$router.go(-1);
              }else{
                this.$router.push({ path: "/communityList" });
              }
            } else {
              that.$message.error(data.message?data.message:'增加失败');
            }
            setTimeout(()=>{
              this.canDo=true;
            },1000)
          }
        });
        //隔五秒放开开关
        setTimeout(()=>{
          this.canDo=true;
        },5000)
      },

      handleChange(value) {
        this.baidu = CodeToText[value[0]];
        this.loadBMapScript(); // 改变地址的时候获取刷新地图
      },

      // 三级联动-省
      getProvince() {
        this.$post({
          url: "Common/Common/getProvince",
          data: {},
          success: data => {
            this.Province = data.data;
          }
        });
      },
      // 三级联动-市
      getCity(id) {
        this.$post({
          url: "Common/Common/getCity",
          data: { id: id },
          success: data => {
            this.City = data.data;
          }
        });
      },
      // 三级联动-区/县
      getArea(id) {
        this.$post({
          url: "Common/Common/getArea",
          data: { id: id },
          success: data => {
            this.Area = data.data;
          }
        });
      },
      // 省改变
      chooseProvince(val) {
        var that = this;
        // 循环获取选中的地址
        $.each(that.Province, function (k, v) {
          if (v.id == val) {
            that.province_name = v.name;
          }
        });
        this.baidu = that.province_name;
        this.loadBMapScript(); // 改变地址的时候获取刷新地图

        this.getCity(val);
        this.city_id = "";
        this.area_id = "";
      },
      // 市改变
      chooseCity(val) {
        var that = this;
        // 循环获取选中的地址
        $.each(that.City, function (k, v) {
          if (v.id == val) {
            that.city_name = v.name;
          }
        });
        this.baidu = that.province_name + that.city_name;
        this.loadBMapScript(); // 改变地址的时候获取刷新地图

        this.getArea(val);
        this.area_id = "";
      },
      // 区/县改变
      chooseArea(val) {
        var that = this;
        // 循环获取选中的地址
        $.each(that.Area, function (k, v) {
          if (v.id == val) {
            that.area_name = v.name;
          }
        });
        this.baidu = that.province_name + that.city_name + that.area_name;
        this.loadBMapScript(); // 改变地址的时候获取刷新地图
      },
      // 获取附近设备
      nearbyEquipment: function (userlocation) {
        var that = this;
        var longitude = userlocation.lng; // 经度
        var latitude = userlocation.lat; // 纬度
        that.$post({
          url: "Partner/Equipment/getNearbyEquipment",
          data: {
            longitude: longitude,
            latitude: latitude
          },
          success: data => {
            //console.log(data)
            if (data.code == 1000) {
              that.tableData = []; // 清空数据
              $.each(data.data.eq_status, function () {
                that.tableData.push(this);
              });
              //console.log(that.tableData);
              that.list = data.data.list;
              that.count = data.data.count;
            }
          }
        });
      },
      // 百度地图
      loadBMapScript() {
        let script = document.createElement("script");
        script.src =
          "https://api.map.baidu.com/api?v=3.0&ak=prPYIikQwAYGs2NC6OcmhkvMy3U8PHGa&callback=bMapInit";
        document.body.appendChild(script);
      },
      loadmap() {
        this.loading = true;
        window["bMapInit"] = () => {
          var that = this;

          // 百度地图API功能
          function G(id) {
            return document.getElementById(id);
          }

          map = new BMap.Map("allmap");
          map.centerAndZoom(this.baidu, 12); // 初始化地图,设置城市和地图级别。
          map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
          map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
          var ac = new BMap.Autocomplete({
            //建立一个自动完成的对象
            input: "suggestId",
            location: map,
            radius: 500
          });

          ac.addEventListener("onhighlight", function (e) {
            //鼠标放在下拉列表上的事件
            var str = "";
            var _value = e.fromitem.value;
            var value = "";
            if (e.fromitem.index > -1) {
              value =
                _value.province +
                _value.city +
                _value.district +
                _value.street +
                _value.business;
            }
            str =
              "FromItem<br />index = " +
              e.fromitem.index +
              "<br />value = " +
              value;

            value = "";
            if (e.toitem.index > -1) {
              _value = e.toitem.value;
              value =
                _value.province +
                _value.city +
                _value.district +
                _value.street +
                _value.business;
            }
            str +=
              "<br />ToItem<br />index = " +
              e.toitem.index +
              "<br />value = " +
              value;
            G("searchResultPanel").innerHTML = str;
          });

          var myValue;
          ac.addEventListener("onconfirm", function (e) {
            // 鼠标点击下拉列表后的事件

            var _value = e.item.value;
            myValue = _value.street + _value.business;
            //myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
            G("searchResultPanel").innerHTML =
              "onconfirm<br />index = " +
              e.item.index +
              "<br />myValue = " +
              myValue;
            G("suggestId").value = myValue;
            setPlace();
          });

          var geoc = new BMap.Geocoder();

          function setPlace() {
            map.clearOverlays(); //清除地图上所有覆盖物
            function myFun() {
              that.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果    经纬度
              //console.log(local.getResults().getPoi(0))
              var marker = new BMap.Marker(that.userlocation);
              map.centerAndZoom(that.userlocation, 18);
              map.addOverlay(marker); //添加标注
              marker.enableDragging();

              // 根据经纬度获取附近的设备-------------------------------------------
              that.nearbyEquipment(that.userlocation);

              marker.addEventListener("dragend", function (e) {
                //通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
                var pt = e.point;
                geoc.getLocation(pt, function (rs) {
                  //addressComponents对象可以获取到详细的地址信息
                  var addComp = rs.addressComponents;
                  var site =
                    addComp.province +
                    ", " +
                    addComp.city +
                    ", " +
                    addComp.district +
                    ", " +
                    addComp.street +
                    ", " +
                    addComp.streetNumber;
                  that.userlocation = pt; // 移动红点后获取经纬度
                });
              });
            }

            var local = new BMap.LocalSearch(map, {
              //智能搜索
              onSearchComplete: myFun
            });
            local.search(myValue);
            that.addrxq = myValue;
          }

          that.loading = false;
        };
      },
      openmap: function (latitude, longitude) {
        //				var marker = new BMap.Marker(latitude);
        //				map.centerAndZoom(latitude, 18);
        //				map.addOverlay(marker); //添加标注
        //				marker.enableDragging();
        //				var point = new BMap.Point(latitude, longitude);
        //				map.centerAndZoom(point, 12);
        //				var marker = new BMap.Marker(point);        // 创建标注
        //				map.addOverlay(marker);
      },

    },


  };
</script>

<style>
  .block {
    margin-left: 10px !important;
  }

  #communityAdd .check_record_card_time .el-input--suffix .el-input__inner {
    padding-left: 15px !important;
  }

  #communityAdd .check_record_card_time .check_record_card_time_box .el-input--suffix .el-input__inner {
    padding-left: 30px !important;
  }

  #communityAdd {
    background-color: #fff;
  }

  #communityAdd .editwrap {
    padding: 10px 40px 30px;
    box-sizing: border-box;
  }

  #communityAdd .formitem {
    display: flex;
    align-items: center;
    margin: 10px 0;
  }

  #communityAdd .formitem input {
    /* width: 286px; */
    height: 38px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    padding: 0 15px;
  }

  #communityAdd .selectitem {
    margin-top: 40px;
  }

  #communityAdd .selectitem input {
    width: 246px;
  }

  #communityAdd .inputOne .el-input>input {
    width: 100px;
  }

  #communityAdd .addressitem {
    /* width: 360px; */
    display: inline-flex;
  }

  #communityAdd .items {
    margin-top: 10px;
  }


  #communityAdd .title {
    font-size: 14px;
    color: #323333;
    padding-right: 15px;
    width: 138px;
    text-align: right;
  }

  #communityAdd .icon {
    /*font-size: 28px;*/
    /*color: #bc1b21;*/
    /*color: #9e383b;*/
    /*margin-left: 13px;*/
    font-style: normal;
    margin-left: 5px;
    color: #FF6565;
  }

  #communityAdd .check_record_card_time .icon {
    font-style: normal;
    margin-left: 5px;
    color: #FF6565;
  }

  #communityAdd table {
    width: 400px;
    height: auto;
    margin-top: 10px;
    border: 1px solid #dde8f6;
    background-color: #f5f5f5;
    padding: 10px 0;
  }

  #communityAdd table td {
    padding: 10px 0 10px 20px;
    font-size: 16px;
    color: #323333;
  }

  #communityAdd .tpl_W-show td:nth-child(1) {
    width: 100px;
  }

  #communityAdd .tpl_W-show td:nth-child(2) {
    width: 160px;
  }

  #communityAdd .tpl_W-show td:nth-child(3) {
    width: 140px;
  }

  #communityAdd .binding {
    outline: none;
    border: 0;
    width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background-color: #2c5586;
    font-size: 16px;
    font-weight: bold;
    border-radius: 3px;
    margin-top: 20px;
  }

  #communityAdd .mapwrap {
    display: flex;
  }

  #communityAdd #allmap {
    width: 80%;
    height: 500px;
  }

  #communityAdd .leftlist {
    width: 20%;
  }

  #communityAdd .leftlist .equipmentitem {
    font-size: 14px;
    cursor: pointer;
    margin: 10px 0;
  }

  #communityAdd .leftlist .equipmentname {
    display: flex;
    align-items: center;
  }

  #deviceadd .leftlist .equipmentname img {
    width: 18px;
    display: block;
  }

  #communityAdd .leftlist .equipmentname .dingwei {
    position: relative;
  }

  #communityAdd .leftlist p {
    padding-left: 28px;
    padding-top: 5px;
  }

  #communityAdd .leftlist .equipmentname .dingwei span {
    color: #fff;
    font-weight: bold;
    position: absolute;
    text-align: center;
    width: 100%;
    top: 2px;
    font-size: 12px;
  }

  .m-10 {
    margin: 10px 0;
  }
  .pdb10{
    padding-bottom: 10px;
  }
  .pdb20{
    padding-bottom: 20px;
  }
  #communityAdd  .el-collapse{
    width: 1000px;
    border-bottom:none!important;
    margin-top: 20px;
  }
  #communityAdd .el-collapse-item__header{
    border-bottom: none!important;
    font-size: 16px;
    color: #2C5586;
  }
  #communityAdd .el-collapse-item__header i{
    padding-right: 10px;
  }
  #communityAdd .el-collapse-item__wrap{
    border-bottom: none!important;
  }
  #communityAdd .edit-comit{
    position: relative;
    min-width: 20px;
    padding: 0 8px;
  }
  #communityAdd  .hint_title{
    font-size: 12px;
    color: #2C5586;
    padding-left: 10px;
  }
    #communityAdd .temp1-list {
    width: 300px;
    position: absolute;
    box-sizing: border-box;
    top:40px;
    left:155px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 3px 8px 0px #E6E6E6;
  }
  #communityAdd .temp-list2 {
    width:330px;
    position: absolute;
    top:40px;
    left:155px;
    border-radius: 5px;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0px 3px 8px 0px #E6E6E6;
  }
  #communityAdd .list-ones:first-child {
    padding-top: 10px;
  }
  #communityAdd .list-ones{
    display: flex;
    justify-content: space-between;
    background: #EDF6FF;
    padding: 0px 25px 10px;
  }
  #communityAdd .el-collapse-item__content{
    padding-bottom: 0px;
  }
  #communityAdd .pd40{
   padding-bottom:40px;
  }
  #communityAdd .havPadding{
    padding-bottom: 240px;
  }
   #communityAdd  .tempShow{
    width: 360px;
    position: relative;
  }
</style>
<style scoped>

  .loction-title-wrapper {
    display: flex;
    color: #2C5586;
    align-items: flex-end;
  }

  .loction-title-wrapper i {
    padding-right: 10px;
  }

  .village-row {
    width: 1000px;
    justify-content: space-between;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .village-cell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
    position: relative;
    width:50%;
    min-height: 36px;
  }
  .hint_show{
    position: absolute;
    top: 42px;
    left: 148px;
    font-size: 12px;
    color: #B3B3B3;
    width: 340px;
    line-height: 13px;
    flex-wrap: wrap;
  }
  .village-cell .title {
    width: 100px;
    flex-shrink: 0;
    font-size: 14px;
    align-items: center;
  }

  .village-cell .ipt {
    width: 400px;
    display: flex;
    position: relative;
  }


  .village-cell .ipt-2 {

    width: 300px;
    display: flex;
    position: relative;
  }

  .must-star {
    color: red;
    margin-left: 10px;
    width: 6px;
  }

  .mr-10 {
    margin-right: 10px;
  }

   #container1 {
    /*地图(容器)显示大小*/
    width: 100%;
    height: 500px;
  }

  .map-input {
    width: 300px;
    margin-bottom: 10px;
  }

  .map-alert {
    margin-top: 10px;
  }

  .auto-name {
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
  }

  .auto-addr {
    font-size: 12px;
    color: #b4b4b4;
    margin: 0;

    list-style: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .custom-li {
    line-height: 24px !important;
  }

  .ml-10 {
    margin-left: 10px;
  }


  .auto-name {
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
  }

  .auto-addr {
    font-size: 12px;
    color: #b4b4b4;
    margin: 0;

    list-style: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .custom-li {
    line-height: 24px !important;
  }

  .question {
    position: absolute;
    right: -5px;
    color: #999;
    cursor: pointer;
  }


  .auto-name {
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
  }

  .auto-addr {
    font-size: 12px;
    color: #b4b4b4;
    margin: 0;

    list-style: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .custom-li {
    line-height: 24px !important;
  }

  .question {
    position: absolute;
    right: -5px;
    color: #999;
    cursor: pointer;
  }

  /* 地图弹窗自己写 */
  .new-add-map-dialog {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    z-index: 2020;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.35);
  }
  .map-wrapper-box{
    background: #FFFFFF;
    padding: 30px 20px;
    width: 1000px;
    position: relative;
    margin: 0 auto 50px;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3);
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .new-close-btn{
    position: absolute;
    top:20px;
    right: 40px;
  }
</style>